import { ref, inject, nextTick, onMounted, computed } from "vue";
import { uniqueId, remove } from "lodash-es";

import store from "@/store/index.js";

import { useActivitiInfo } from "./use-activiti-info.js";

const { createActivitiInfoModule, activitiInfoStore } = useActivitiInfo();

/** 当前模块名 */
const currentModuleName = ref("");

/** 动态store模块注册
 * @description
 * 参考资料 https://v3.vuex.vuejs.org/zh/api/#registermodule
 */
export function registerActivitiInfoModule() {
  // 存储新的模块名 先新建 获取新的模块名 从全局的getter内获取到模块名
  currentModuleName.value = store.getters["moduleNames/getNewModuleName"];

  console.log(" 注册模块：模块名称 =  ", {
    // "store.state.moduleNames": store.state.moduleNames,
    // "store.getters['moduleNames/getNewModuleName']":
    //   store.getters["moduleNames/getNewModuleName"],
    " currentModuleName.value": currentModuleName.value,
  });

  // 再开始注册模块
  store.registerModule(currentModuleName.value, createActivitiInfoModule());

  // 最后返回最新提供的模块名
  return currentModuleName.value;
}

/** 动态store模块取消注册
 * @param { string } moduleName 外部传递进来的模块名
 */
export function unregisterActivitiInfoModule(moduleName) {
  // 先在名称数组内 移除模块名称
  store.commit({
    type: "moduleNames/removeModuleName",
    payload: { id: moduleName },
  });

  // 再取消注册该模块
  store.unregisterModule(moduleName);
}

// @returns { import("vuex").Module< typeof activitiInfoStore > }
/** 获得当前管理的模块名称
 * @param { string } moduleName 外部传递进来的模块名
 */
export function getCurrentModule(moduleName) {
  return store.state[moduleName];
}

/** 使用模块管理
 *
 * @deprecated
 * 动态的store模块的管理遇到一个大问题
 * 页面刷新时，无法有效的去控制相关的模块移除掉。因为组件实例总是存在。
 *
 * 这还额外涉及到了组件的生命周期，路由对组件的复用情况等。和路由的耦合关系变高了。
 *
 * 故这里不作处理了。不打算使用动态的vuex模块管理了。
 */
export function useStoresManage(params) {
  return {
    currentModuleName,

    registerActivitiInfoModule,
    getCurrentModule,
    unregisterActivitiInfoModule,
  };
}
